// 使用第三方库react-virtualized虚拟滚动库按需显示，不渲染所有列表项，只渲染可视区域内的一部分列表元素
// npm install react-virtualized@9.22.3  --save
import React from 'react';
// 引入第三方库
import {List,AutoSizer} from 'react-virtualized'

class ListFalse extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            list: []
        }
    }
    componentDidMount() {
        this.setState({
            list:new Array(40000).fill(0)
        })
    }
    render() {
        return (
            <>
                <h1>虚拟列表</h1>
                <div style={{height:300,border:'1px solid red'}}>
                    <AutoSizer>
                        {
                            // width,height为列表宽度和高度，必须添加
                            ({width,height})=>{
                                return (
                                    // rowCount为数组长度
                                    // rowHeight为渲染列表高度
                                    // rowRenderer为怎么渲染，有三个参数

                                    <List
                                        width={width}
                                        height={height}
                                        rowCount={this.state.list.length}
                                        rowHeight={50}
                                        rowRenderer={({index,key,style})=><li key={key} style={style}>这是第{index+1}条数据</li>}
                                    />
                                )
                            }
                        }
                    </AutoSizer>
                </div>
            </>
        )
    }
}
export default ListFalse;